import React, {ReactNode, useEffect, useRef, useState} from "react";
import {createStyles} from "antd-style"

interface Prop {
    children: ReactNode
}


const XScroll: React.FC<Prop> = ({children}) => {
    const [containerSize, setContainerSize] = useState<{ w: number, h: number } | null>(null)
    const container = useRef<HTMLDivElement | null>(null)

    const useStyles = createStyles(({css, token}) => {
        return {
            container: css`
                width: 100%;
                height: 100%;
            `,
            center: css`
                width: ${containerSize ? containerSize.h : 0}px;
                height: ${containerSize ? containerSize.w : 0}px;
                transform-origin: left top;
                overflow: auto ;
                transform: translateY(${containerSize ? containerSize.h : 0}px) rotate(-90deg);
                position: relative;
                ::-webkit-scrollbar {
                    display: none;
                }
            `,
            content: css`
                height: ${containerSize ? containerSize.h : 0}px;
                position: absolute;
                top: 0;
                left: ${containerSize ? containerSize.h : 0}px;
                transform-origin: left top;
                transform: rotate(90deg);
            `,
        }
    })


    const styles = useStyles().styles;

    useEffect(() => {
        if (container.current == null) return
        const current = container.current
        setContainerSize({
            w: current.clientWidth,
            h: current.clientHeight,
        })
        current.onresize = () => {
            setContainerSize({
                w: current.clientWidth,
                h: current.clientHeight,
            })
        }
        return () => {
            current.onresize = null
        }
    }, [container.current]);

    return (
        <div ref={container}
             className={styles.container}
        >
            <div className={styles.center}>
                <div className={styles.content}>
                    {children}
                </div>
            </div>
        </div>
    )
}

export default XScroll
